import { NavLink } from 'react-router-dom'
import { 
  ChatBubbleLeftRightIcon, 
  PhotoIcon, 
  ClipboardDocumentListIcon, 
  PuzzlePieceIcon, 
  UserIcon,
  PencilSquareIcon
} from '@heroicons/react/24/outline'
import { useAuthStore } from '@/stores/authStore'

const navigation = [

  { name: '💕 聊天', href: '/chat', icon: ChatBubbleLeftRightIcon },
  { name: '✨ 便签', href: '/notes', icon: ClipboardDocumentListIcon },
  { name: '🌸 相册', href: '/album', icon: PhotoIcon },
  { name: '🎀 游戏', href: '/game', icon: PuzzlePieceIcon },
  { name: '🦋 语法检查', href: '/grammar', icon: PencilSquareIcon },
  { name: '👤 个人', href: '/profile', icon: UserIcon },
]

// 隐藏的管理员功能
const adminNavigation = [
  { name: '👑 用户管理', href: '/admin/users', icon: UserIcon },
]

const Sidebar = () => {
  const { user, logout } = useAuthStore()
  
  // 检查是否为管理员（这里简单判断用户名包含admin，实际项目中应该用角色字段）
  const isAdmin = user?.username?.includes('admin') || user?.username === 'user1'

  return (
    <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-64 lg:flex-col">
      <div className="flex grow flex-col gap-y-5 overflow-y-auto bg-white/95 backdrop-blur-md border-r border-white/20 shadow-soft px-6 pb-4">
        {/* Logo */}
        <div className="flex h-16 shrink-0 items-center">
          <h1 className="text-2xl font-bold text-gradient-primary font-display animate-fade-in">
            🌸 温の家 💕
          </h1>
        </div>
        
        {/* 导航菜单 */}
        <nav className="flex flex-1 flex-col">
          <ul role="list" className="flex flex-1 flex-col gap-y-7">
            <li>
              <ul role="list" className="-mx-2 space-y-1">
                {navigation.map((item) => (
                  <li key={item.name}>
                    <NavLink
                      to={item.href}
                      className={({ isActive }) =>
                        `group flex gap-x-3 rounded-xl p-3 text-sm leading-6 font-semibold transition-all duration-200 ${
                          isActive
                            ? 'bg-gradient-to-r from-primary-50 to-primary-100 text-primary-700 shadow-warm border border-primary-200/50'
                            : 'text-secondary-700 hover:text-primary-600 hover:bg-primary-50/50 hover:shadow-soft'
                        }`
                      }
                    >
                      <item.icon
                        className="h-5 w-5 shrink-0 transition-transform duration-200 group-hover:scale-110"
                        aria-hidden="true"
                      />
                      {item.name}
                    </NavLink>
                  </li>
                ))}
              </ul>
            </li>
            
            {/* 管理员功能 */}
            {isAdmin && (
              <li>
                <div className="text-xs font-semibold leading-6 text-gray-400 mb-2 mt-4">
                  管理员功能
                </div>
                <ul role="list" className="-mx-2 space-y-1">
                  {adminNavigation.map((item) => (
                    <li key={item.name}>
                      <NavLink
                        to={item.href}
                        className={({ isActive }) =>
                          `group flex gap-x-3 rounded-xl p-3 text-sm leading-6 font-semibold transition-all duration-200 ${
                            isActive
                              ? 'bg-gradient-to-r from-amber-50 to-orange-100 text-amber-700 shadow-amber border border-amber-200/50'
                              : 'text-gray-600 hover:text-amber-600 hover:bg-amber-50/50 hover:shadow-soft'
                          }`
                        }
                      >
                        <item.icon
                          className="h-5 w-5 shrink-0 transition-transform duration-200 group-hover:scale-110"
                          aria-hidden="true"
                        />
                        {item.name}
                      </NavLink>
                    </li>
                  ))}
                </ul>
              </li>
            )}
            
            {/* 用户信息 */}
            <li className="mt-auto">
              <div className="border-t border-white/20 pt-4">
                <div className="flex items-center gap-x-3 mb-4 p-3 rounded-xl bg-gradient-to-r from-primary-50/50 to-accent-50/50 border border-white/30">
                  <div className="avatar">
                    {user?.avatar ? (
                      <img
                        className="avatar-image"
                        src={user.avatar}
                        alt={user.displayName || user.username}
                      />
                    ) : (
                      <div className="avatar-fallback">
                        {(user?.displayName || user?.username || 'U').charAt(0).toUpperCase()}
                      </div>
                    )}
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-semibold text-secondary-900 truncate">
                      {user?.displayName || user?.username}
                    </p>
                    <p className="text-xs text-secondary-600 truncate">
                      {user?.email}
                    </p>
                    <p className="text-xs mt-1">
                      { (user as any)?.partnerId
                        ? <span className="text-green-600 font-medium">已绑定 @{(user as any)?.partner?.username || '对方'}</span>
                        : <span className="text-secondary-500">未绑定</span>
                      }
                    </p>
                  </div>
                </div>
                
                <button
                  onClick={logout}
                  className="w-full text-left text-sm text-secondary-600 hover:text-red-600 hover:bg-red-50 p-2 rounded-lg transition-all duration-200 font-medium"
                >
                  👋 退出登录
                </button>
              </div>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  )
}

export default Sidebar